<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>LEP - Linux Easy Profiling</title>

  <link href="/static/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="/static/vendors/sb-admin/css/sb-admin.css" rel="stylesheet">
  <link href="/static/vendors/datatables/media/css/jquery.dataTables.min.css " rel="stylesheet">
  <link href="/static/vendors/c3/c3.min.css" rel="stylesheet">
  <link href="/static/vendors/whhg-font/css/whhg.css" rel="stylesheet">
  <link href="/static/vendors/flameGraph/d4.flameGraph.css" rel="stylesheet">

  <link href="/static/css/lepv.css" rel="stylesheet">

</head>

<body class="fixed-nav sticky-footer bg-dark" id="page-top">
  <!-- Navigation-->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <a class="navbar-brand" href="/">LEP - Linux Easy Profiling</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav navbar-sidenav" id="sideBarAccordion">

        <!--<li class="nav-item" data-toggle="tooltip" data-placement="right" title=" Summary">-->
          <!--<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseSummaryMenu" data-parent="#sideBarAccordion">-->
            <!--<i class="fa fa-fw fa-dashboard"></i>-->
            <!--<span class="nav-link-text">Summary</span>-->
          <!--</a>-->
          <!--<ul class="sidenav-second-level collapse" id="collapseSummaryMenu">-->
            <!--<li>-->
              <!--<a href="#">CPU</a>-->
            <!--</li>-->
            <!--<li>-->
              <!--<a href="#">MEMORY</a>-->
            <!--</li>-->
            <!--<li>-->
              <!--<a href="#">IO</a>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</li>-->



        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="CPU">
          <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseCpuMenu" data-parent="#sideBarAccordion">
            <i class="icon-cpu-processor"></i>
            <span class="nav-link-text">CPU</span>
          </a>
          <ul class="sidenav-second-level collapse" id="collapseCpuMenu">
            <li>
              <a href="#container-div-cpu-stat-donut">Stat: Overall</a>
            </li>
            <li>
              <a href="#container-div-cpu-stat-idle">Stat: Idle</a>
            </li>
            <li>
              <a href="#container-div-cpu-stat-user-group">Stat: User Group</a>
            </li>
            <li>
              <a href="#container-div-cpu-stat-irqGroup">Stat: Irq Group</a>
            </li>
            <li>
              <a href="#container-div-cpu-stat-nettxIrq">Stat: SoftIRQ - NET_TX</a>
            </li>
            <li>
              <a href="#container-div-cpu-avgload">Average Load</a>
            </li>
            <li>
              <a href="#container-div-cpu-top-table">CPU TOP</a>
            </li>
          </ul>
        </li>



        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Memory">
          <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#sideBarAccordion">
            <i class="icon-ram"></i>
            <span class="nav-link-text">Memory</span>
          </a>
          <ul class="sidenav-second-level collapse" id="collapseComponents">
            <li>
              <a href="#container-div-memory-chart">Stat</a>
            </li>
            <li>
              <a href="#container-memory-stat-table">Memory Consumption</a>
            </li>
            <li>
                <a href="#container-div-memory-free-pss-stat">PSS Ratio</a>
            </li>
          </ul>
        </li>


        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="IO">
          <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseIOMenu" data-parent="#sideBarAccordion">
            <i class="icon-syncalt"></i>
            <span class="nav-link-text">Status</span>
          </a>
          <ul class="sidenav-second-level collapse" id="collapseIOMenu">

          </ul>
        </li>


        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Perf">
          <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapsePerfMenu" data-parent="#sideBarAccordion">
            <i class="icon-rawaccesslogs"></i>
            <span class="nav-link-text">Perf</span>
          </a>
          <ul class="sidenav-second-level collapse" id="collapsePerfMenu">
            <li>
              <a href="#">Perf CPU</a>
            </li>
          </ul>
        </li>


      </ul>
      <ul class="navbar-nav sidenav-toggler">
        <li class="nav-item">
          <a class="nav-link text-center" id="sidenavToggler">
            <i class="fa fa-fw fa-angle-left"></i>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <form class="form-inline my-2 my-lg-0 mr-lg-2">
            <div class="input-group">
              <input id='txt_server_to_watch' class="form-control" type="text" placeholder="www.rmlink.cn" value="www.rmlink.cn">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button" onclick="tryWatching()">
                  <i class="fa fa-play"></i>
                </button>
              </span>
            </div>
          </form>
        </li>
      </ul>
    </div>
  </nav>
  <div class="content-wrapper">
    <div class="container-fluid">


      <!--<div class="col-md-12">-->
        <!--<div id='Summary' class="card mb-3">-->
          <!--<div class="card-header">-->
              <!--<i class="fa fa-fw fa-dashboard"></i> {{ languages.SystemSummary }}-->
          <!--</div>-->
          <!--<div class="card-body">-->
              <!---->
              <!---->
              <!--<div class="row">-->
                  <!--<div class="col-md-3">-->
                      <!--<div class="card-body">-->
                          <!--<div id="div-cpu-gauge"></div>-->

                          <!--<div class="panel-footer text-center">-->
                              <!--{% if config == 'debug' %}-->
                              <!--处理器 - [GetCmdMpstat]-->
                              <!--{% else %}-->
                              <!--处理器-->
                              <!--{% endif %}-->
                          <!--</div>-->
                      <!--</div>-->
                  <!--</div>-->
                  <!--<div class="col-md-3">-->
                      <!--<div class="card-body">-->
                          <!--<div id="div-memory-gauge"></div>-->
                          <!--<div class="panel-footer text-center">-->
                              <!--{% if config == 'debug' %}-->
                              <!--内存 - [GetProcMeminfo]-->
                              <!--{% else %}-->
                              <!--内存-->
                              <!--{% endif %}-->
                          <!--</div>-->
                      <!--</div>-->
                  <!--</div>-->
                  <!--<div class="col-md-3">-->
                      <!--<div class="card-body">-->
                          <!--<div id="div-io-gauge"></div>-->
                          <!--<div class="panel-footer text-center">-->
                              <!--{% if config == 'debug' %}-->
                              <!--磁盘 - [GetCmdIostat]-->
                              <!--{% else %}-->
                              <!--磁盘-->
                              <!--{% endif %}-->
                          <!--</div>-->
                      <!--</div>-->
                  <!--</div>-->
              <!--</div>-->

              <!--<div class="row">-->
                  <!--<div class="col-md-3">-->
                      <!--{% if config == 'debug' %}-->
                      <!--<div>[GetProcCpuinfo]</div>-->
                      <!--{% endif %}-->
                      <!--<div id="div-cpu-summary" class="panel panel-green">-->
                      <!--</div>-->
                  <!--</div>-->

                  <!--<div class="col-md-3">-->
                      <!--{% if config == 'debug' %}-->
                      <!--<div>[GetProcMeminfo]</div>-->
                      <!--{% endif %}-->
                      <!--<div id="div-memory-summary" class="panel panel-green">-->
                      <!--</div>-->
                  <!--</div>-->

                  <!--<div class="col-md-3">-->
                      <!--{% if config == 'debug' %}-->
                      <!--<div>[GetCmdDf]</div>-->
                      <!--{% endif %}-->
                      <!--<div id="div-io-summary" class="panel panel-green">-->
                      <!--</div>-->
                  <!--</div>-->
              <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->



      <!--cpu-stat-donut-->
      <div class="col-md-6">
        <div id="container-div-cpu-stat-donut" class="card mb-3">
          <div class="card-header"><i class="icon-cpu-processor"></i> CPU Stat: Overall</div>
          <div class="card-body"><div class="chart-panel"></div></div>
          <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
        </div>
      </div>


     <!--cpu-stat-idle-->
      <div class="col-md-12">
        <div id="container-div-cpu-stat-idle" class="card mb-3">
          <div class="card-header"><i class="icon-cpu-processor"></i> CPU Stat: Idle</div>
          <div class="card-body"><div class="chart-panel"></div></div>
          <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
        </div>
      </div>


      <!--cpu-stat-user-group-->
      <div class="col-md-12">
        <div id="container-div-cpu-stat-user-group" class="card mb-3">
          <div class="card-header"><i class="icon-cpu-processor"></i> CPU Stat: User + System + Nice</div>
          <div class="card-body"><div class="chart-panel"></div></div>
          <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
        </div>
      </div>


      <!--cpu-stat-irqGroup-->
      <div class="col-md-12">
        <div id="container-div-cpu-stat-irqGroup" class="card mb-3">
            <div class="card-header"><i class="icon-cpu-processor"></i><span class="spanTitle">{{ languages.cpuIrqGroupChartTitle }}</span></div>
            <div class="card-body"><div class="chart-panel"></div></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
        </div>
      </div>


      <!--cpu-stat-irq-->
      <div class="col-md-12">
          <div id="container-div-cpu-stat-irq" class="card mb-3">
              <div class="card-header"><i class="icon-cpu-processor"></i><span class="spanTitle">{{ languages.cpuIrqChartTitle }}</span></div>
              <div class="card-body"><div class="chart-panel"></div></div>
              <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>


      <!--cpu-stat-nettxIrq-->
      <div class="col-md-12">
          <div id="container-div-cpu-stat-nettxIrq" class="card mb-3">
            <div class="card-header"><i class="icon-cpu-processor"></i><span class="spanTitle">{{ languages.cpuNettxIrqChartTitle }}</span></div>
            <div class="card-body"><div class="chart-panel"></div></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

      <!--cpu-stat-netrxIrq-->
      <div class="col-md-12">
          <div id="container-div-cpu-stat-netrxIrq" class="card mb-3">
            <div class="card-header"><i class="icon-cpu-processor"></i><span class="spanTitle">{{ languages.cpuNettxIrqChartTitle }}</span></div>
            <div class="card-body"><div class="chart-panel"></div></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

      <div class="col-md-12">
          <div id="container-div-cpu-stat-taskletIrq" class="card mb-3">
            <div class="card-header">
                <i class="icon-cpu-processor"></i>
                <span class="spanTitle">{{ languages.cpuNettxIrqChartTitle }}</span>
            </div>
            <div class="card-body"><div class="chart-panel"></div></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

      <div class="col-md-12">
          <div id="container-div-cpu-stat-hrtimerIrq" class="card mb-3">
            <div class="card-header">
                <i class="icon-cpu-processor"></i>
                <span class="spanTitle">{{ languages.cpuNettxIrqChartTitle }}</span>
            </div>
            <div class="card-body"><div class="chart-panel"></div></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>



      <div class="col-md-12">
        <div id="container-div-cpu-avgload" class="card mb-3">
          <div class="card-header">
              <i class="icon-cpu-processor"></i>
              {% if config == 'debug' %}
              <span class="spanTitle">{{ languages.averageLoadChartTitle }} - [GetProcLoadavg]</span>
              {% else %}
              <span class="spanTitle" fullTitle="{{ languages.averageLoadChartTitleFull }}" shortTitle="{{ languages.averageLoadChartTitle }}">{{ languages.averageLoadChartTitle }}</span>
              {% endif %}
          </div>
          <div class="card-body"><div class="chart-panel"></div></div>
          <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
        </div>
      </div>

      <div class="col-md-12">
          <div id="container-div-cpu-top-table" class="card mb-3">
            <div class="card-header">
                {% if config == 'debug' %}
                <i class="icon-cpu-processor"></i> CPU TOP -[GetCmdTop]
                {% else %}
                <i class="icon-cpu-processor"></i> CPU TOP
                {% endif %}
            </div>
            <div class="card-body"><table class="display compact chart-panel" cellspacing="0"></table></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>


      <div class="col-md-12">
          <div id="container-div-memory-chart" class="card mb-3">
            <div class="card-header">
                {% if config == 'debug' %}
                <i class="icon-ram"></i> {{ languages.ramChartTitle }} -[GetProcMeminfo]
                {% else %}
                <i class="icon-ram"></i> {{ languages.ramChartTitle }}
                {% endif %}
            </div>
            <div class="card-body"><div class="chart-panel"></div></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

      <div class="col-md-12">
          <div id="container-memory-stat-table" class="card mb-3">
            <div class="card-header">
                {% if config == 'debug' %}
                <i class="icon-ram"></i> {{ languages.memoryConsumptionChartTitle }} -[GetCmdProcrank]
                {% else %}
                <i class="icon-ram"></i> {{ languages.memoryConsumptionChartTitle }}
                {% endif %}
            </div>
            <div class="card-body"><table class="display compact chart-panel" cellspacing="0"></table></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

      <div class="col-md-12">
          <div class="row">

              <div class="col-md-4">
            <div id="container-div-memory-free-pss-stat" class="card mb-3">
              <div class="card-header">
                  {% if config == 'debug' %}
                  <i class="icon-ram"></i> {{ languages.memoryPssAgainstTotalChartTitle }} -[GetCmdProcrank]
                  {% else %}
                  <i class="icon-ram"></i> {{ languages.memoryPssAgainstTotalChartTitle }}
                  {% endif %}
              </div>
              <div class="card-body"><div class="chart-panel"></div></div>
              <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
            </div>
          </div>
          <div class="col-md-8">
            <div id="container-div-memory-pss-stat" class="card mb-3">
              <div class="card-header">
                  {% if config == 'debug' %}
                  <i class="icon-ram"></i> {{ languages.memoryPssDonutChartTitle }} -[GetCmdProcrank]
                  {% else %}
                  <i class="icon-ram"></i> {{ languages.memoryPssDonutChartTitle }}
                  {% endif %}
              </div>
              <div class="card-body"><div class="chart-panel"></div></div>
              <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
            </div>
          </div>


          </div>

      </div>
      

      <div class="col-md-12">
          <div id='container-div-IOCharts' class="card mb-3">
              <div class="card-header">
                  {% if config == 'debug' %}
                  <i class="icon-syncalt"></i> {{ languages.ioChartTitle }} -[GetCmdIostat]
                  {% else %}
                  <i class="icon-syncalt"></i> {{ languages.ioChartTitle }}
                  {% endif %}
              </div>
              <div class="card-body"><div class="chart-panel"></div></div>
              <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

      <div class="col-md-12">
          <div id="container-io-top-table" class="card mb-3">
            <div class="card-header">
                {% if config == 'debug' %}
                <i class="icon-syncalt"></i> I/O Top Table -[GetCmdIotop]
                {% else %}
                <i class="icon-syncalt"></i> I/O Top Table
                {% endif %}
            </div>
            <div class="card-body"><table class="display compact chart-panel" cellspacing="0"></table></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

      <div class="col-md-12">
          <div id="container-perf-cpu-table" class="card mb-3">
            <div class="card-header">
                <i class="glyphicon glyphicon-tasks"></i>
                {% if config == 'debug' %}
                <span class="spanTitle">{{ languages.perfTableTitle }}</span> -[GetCmdPerfCpuclock]
                {% else %}
                <span class="spanTitle" fullTitle="{{ languages.perfTableTitleFull }}" shortTitle="{{ languages.perfTableTitle }}">{{ languages.perfTableTitle }}</span>
                {% endif %}
            </div>
            <div class="card-body"><table class="display compact chart-panel" cellspacing="0"></table></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>


      <!--flame graph-->
      <div class="col-md-12">
          <div id="container-perf-cpu-flame-graph" class="card mb-3">
            <div class="card-header">
                <i class="glyphicon glyphicon-tasks"></i>
                {% if config == 'debug' %}
                <span class="spanTitle">FlameGraph</span>
                {% else %}
                <span class="spanTitle" fullTitle="{{ languages.perfTableTitleFull }}" shortTitle="{{ languages.perfTableTitle }}">Flame Graph Demo, mock data for now</span>
                {% endif %}
            </div>
            <div class="card-body"><div class="chart-panel"></div></div>
            <div class="card-footer small text-muted" hidden><i class="fa fa-bell" aria-hidden="true"> </i></div>
          </div>
      </div>

    </div>
    <!-- /.container-fluid-->
    <!-- /.content-wrapper-->
    <footer class="sticky-footer">
      <div class="container">
        <div class="text-center">
          <small>Copyright © LEP Team 2017</small>
        </div>
      </div>
    </footer>
    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
      <i class="fa fa-angle-up"></i>
    </a>
    <!-- Logout Modal-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="login.html">Logout</a>
          </div>
        </div>
      </div>
    </div>


    <script src="/static/vendors/jquery/jquery.min.js"></script>
    <script src="/static/vendors/popper/popper.min.js"></script>
    <script src="/static/vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/vendors/jquery-easing/jquery.easing.min.js"></script>
    <script src="/static/vendors/sb-admin/js/sb-admin.min.js"></script>
    <script src="/static/vendors/datatables/media/js/jquery.dataTables.min.js"></script>
    <script src="/static/vendors/c3/d3.min.js" charset="utf-8"></script>
    <script src="/static/vendors/c3/c3.min.js"></script>
    <script src="/static/vendors/socket-io/socket-io-slim.js"></script>
    <script src="/static/vendors/flameGraph/d4.js"></script>
    <script src="/static/vendors/flameGraph/d4.tip.js"></script>
    <script src="/static/vendors/flameGraph/d4.flameGraph.min.js"></script>

    <script src="/static/js/charts/lepvChart.js"></script>
    <script src="/static/js/charts/lepvGaugeChart.js"></script>

    <script src="/static/js/charts/cpu/cpuStatDonutChart.js"></script>
    <script src="/static/js/charts/cpu/cpuStatIdleChart.js"></script>
    <script src="/static/js/charts/cpu/cpuStatIrqGroupChart.js"></script>
    <script src="/static/js/charts/cpu/cpuStatUserGroupChart.js"></script>

    <script src="/static/js/charts/cpu/cpuGauguChart.js"></script>
    <script src="/static/js/charts/cpu/cpuAvgloadChart.js"></script>

    <script src="/static/js/charts/cpu/cpuIrqChart.js"></script>
    <script src="/static/js/charts/cpu/cpuTopTable.js"></script>

    <script src="/static/js/charts/memory/memoryGauguChart.js"></script>
    <script src="/static/js/charts/memory/memoryChart.js"></script>
    <script src="/static/js/charts/memory/memoryStatTable.js"></script>
    <script src="/static/js/charts/memory/procrankFreeVsPieChart.js"></script>
    <script src="/static/js/charts/memory/procrankPssPieChart.js"></script>

    <script src="/static/js/charts/io/ioStatChart.js"></script>
    <script src="/static/js/charts/io/ioGauguChart.js"></script>
    <script src="/static/js/charts/io/ioTopTable.js"></script>

    <script src="/static/js/charts/perf/perfCpuTable.js"></script>

    <script src="/static/js/charts/perf/perfCpuFlameGraph.js"></script>

    <!--<script src="/static/ts/charts/tsLepvChart.js"></script>-->

    <!-- Custom scripts for this page-->
    <!-- Toggle between fixed and static navbar-->
    <script>
    $('#toggleNavPosition').click(function() {
      $('body').toggleClass('fixed-nav');
      $('nav').toggleClass('fixed-top static-top');
    });

    </script>
    <!-- Toggle between dark and light navbar-->
    <script>
    $('#toggleNavColor').click(function() {
      $('nav').toggleClass('navbar-dark navbar-light');
      $('nav').toggleClass('bg-dark bg-light');
      $('body').toggleClass('bg-dark bg-light');
    });

    </script>

     <script>

         var socket = null;
         var serverToWatch = null;

         $( document ).ready(function() {

            $('[data-toggle="popover"]').popover();

            $('.popover-dismiss').popover({
              trigger: 'focus'
            })

        });
    </script>

    <script>
      function startWatching(specifiedServer) {

        serverToWatch = specifiedServer;

        console.log("Connecting Socket IO by: " + 'http://' + document.domain + ':' + location.port);

        socket = io.connect('http://' + document.domain + ':' + location.port);

        if (socket != null ) {
            console.log("socket connected");
        } else {
            alert("Socket not connected");
            return;
        }

        var cpuStatDonutChart = new CpuStatDonutChart("container-div-cpu-stat-donut", socket, serverToWatch);
        var cpuStatIdleChart = new CpuStatIdleChart("container-div-cpu-stat-idle", socket, serverToWatch);
        var cpuStatUserGroupChart = new CpuStatUserGroupChart("container-div-cpu-stat-user-group", socket, serverToWatch);
        var cpuIrqGroupChart = new CpuIrqGroupChart("container-div-cpu-stat-irqGroup", socket, serverToWatch);

        var cpuIrqChart = new CpuIrqChart("container-div-cpu-stat-irq", socket, serverToWatch, 'irq');
        var cpuNettxIrqChart = new CpuIrqChart("container-div-cpu-stat-nettxIrq", socket, serverToWatch, 'NET_TX');
        var cpuNetrxIrqChart = new CpuIrqChart("container-div-cpu-stat-netrxIrq", socket, serverToWatch, 'NET_RX');
        var cputaskletIrqChart = new CpuIrqChart("container-div-cpu-stat-taskletIrq", socket, serverToWatch, 'TASKLET');
        var cpuhrtimerIrqChart = new CpuIrqChart("container-div-cpu-stat-hrtimerIrq", socket, serverToWatch, 'HRTIMER');


        var cpuAvgloadChart = new CpuAvgLoadChart("container-div-cpu-avgload", socket, serverToWatch);

        var cpuTopTable = new CpuTopTable("container-div-cpu-top-table", socket, serverToWatch);

        var memoryChart = new MemoryChart('container-div-memory-chart', socket, serverToWatch);

        var memoryStatTable = new MemoryStatTable('container-memory-stat-table', socket, serverToWatch);
        var memoryFreePssStatChart = new ProcrankFreeVsPieChart('container-div-memory-free-pss-stat', socket, serverToWatch);
        var memoryPssStatChart = new ProcrankPssPieChart('container-div-memory-pss-stat', socket, serverToWatch);

        var ioStatChart = new IOStatChart('container-div-IOCharts', socket, serverToWatch);
        var ioTopTable = new IoTopTable('container-io-top-table', socket, serverToWatch);

        var perfCpuTable = new PerfCpuTable('container-perf-cpu-table', socket, serverToWatch);
        var perfCpuFlameGraph = new PerfCpuFlameGraph('container-perf-cpu-flame-graph',socket, serverToWatch);
        
      }
    </script>

    <script>
      function tryWatching() {

        var specifiedServer = $("#txt_server_to_watch").val();

        if ( !specifiedServer) {
          return;
        }

        if (serverToWatch == specifiedServer) {
          return;
        }

        $.get( "/api/util/ping/" + specifiedServer, function( pingResult ) {
            if (pingResult['connected']) {
              startWatching(specifiedServer);
            } else {
              alert("Cannot reach the server to watch: " + specifiedServer);
            }
        })
        .fail(function(err, msg) {
            alert("Cannot reach the server to watch: " + specifiedServer);
        });
      }

    </script>

  </div>
</body>

</html>
